extends ../_layout

block active
  - sidebar_active = 'form-xeditable.html'

block content
  h3 X-Editable
    small In-place editing

  .clearfix.mb-lg
    .pull-left
      button#enable.btn.btn-default enable / disable
    .pull-right
      .checkbox.c-checkbox
        label
          input#autoopen(type='checkbox')
          span.fa.fa-check
          |  auto-open next field

  .panel
    .panel-heading Editable inputs
    table#user.table.table-bordered.table-striped(style='clear: both')
      tbody
        tr
          td(width='35%') Simple text field
          td(width='65%')
            a#username(href='#', data-type='text', data-pk='1', data-title='Enter username') superuser
        tr
          td Empty text field, required
          td
            a#firstname(href='#', data-type='text', data-pk='1', data-placement='right', data-placeholder='Required', data-title='Enter your firstname')
        tr
          td Select, local array, custom display
          td
            a#sex(href='#', data-type='select', data-pk='1', data-value='', data-title='Select sex')
        tr
          td Select, remote array, no buttons
          td
            a#group(href='#', data-type='select', data-pk='1', data-value='5', data-source='../server/xeditable-groups.json', data-title='Select group') Admin
        tr
          td Select, error while loading
          td
            a#status(href='#', data-type='select', data-pk='1', data-value='0', data-source='/status', data-title='Select status') Active
        tr
          td Combodate (date)
          td
            a#dob(href='#', data-type='combodate', data-value='1984-05-15', data-format='YYYY-MM-DD', data-viewformat='DD/MM/YYYY', data-template='D / MMM / YYYY', data-pk='1', data-title='Select Date of birth')
        tr
          td Combodate (datetime)
          td
            a#event(href='#', data-type='combodate', data-template='D MMM YYYY  HH:mm', data-format='YYYY-MM-DD HH:mm', data-viewformat='MMM D, YYYY, HH:mm', data-pk='1', data-title='Setup event date and time')
        tr
          td
            | Textarea, buttons below. Submit by 
            i ctrl+enter
          td
            a#comments(href='#', data-type='textarea', data-pk='1', data-placeholder='Your comments here...', data-title='Enter comments') awesomeuser!
        tr
          td Checklist
          td
            a#fruits(href='#', data-type='checklist', data-value='2,3', data-title='Select fruits')
  
  .panel
    .panel-heading Editable table
    table#users.table.table-bordered.table-condensed
      tr
        th #
        th name
        th age
      tr
        td 1
        td
          a(href='#', data-pk='1') Mike
        td 
          a(href='#', data-pk='1') 21
      tr
        td 2
        td
          a(href='#', data-pk='2') John
        td 
          a(href='#', data-pk='2') 28
      tr
        td 3
        td
          a(href='#', data-pk='3') Mary
        td 
          a(href='#', data-pk='3') 24



block vendor_css
  // XEDITABLE
  link(rel='stylesheet', href='../vendor/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css')  
block vendor_js
  // XEDITABLE
  script(src="../vendor/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js")
  // MOMENT JS
  script(src='../vendor/moment/min/moment-with-locales.min.js')
  // DEMO
  script(src='js/demo/demo-xeditable.js')